<template>
  <div class="w-full h-full flex flex-col py-4 px-2 rounded-xl border-slate-200 bg-white box-border overflow-hidden ">
    <div class="w-full  flex items-center content-center mb-4 pr-5"  style="height: 40px">
      <div class="flex items-center bg-indigo-50/60 rounded-lg py-0.5 px-2">
        <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base"/>
        <span class="title font-semibold text-indigo-600 ml-1.5">AGV {{$t('common.detailed')}}</span>
      </div>
      <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
      <el-form :inline="true" :model="from" class="align-center search-form" style="margin-bottom: 10px">
<!--        <el-form-item class="label" label="时间">-->
<!--          <el-date-picker-->
<!--            style="width: 220px" v-model="from.time" type="daterange"-->
<!--            range-separator="-" start-placeholder="开始时间"-->
<!--            end-placeholder="结束时间" class="custom-date-picker"/>-->
<!--        </el-form-item>-->
        <el-button class="buttons" size="small" type="primary" @click="goBack" style="margin-top: 3px">{{$t('common.fanhui')}}</el-button>
      </el-form>
    </div>
    <div class="w-full  flex-1 items-center  overflow-hidden box-border pr-5" >
      <div class="table-list w-full h-full ">
        <el-table
            ref="tableRef" border id="out-table" :data="headerList" :fit="true" table-layout="fixed"
            header-align="center" style="width:100%;height: 95%;" v-loading="data.loading" :header-cell-style="{
          color: '#1e293b',textAlign: 'center',fontWeight: '600',
          background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',borderColor: '#e2e8f0',height: '40px'}"
            :cell-style="{textAlign: 'center',color: '#334155',borderColor: '#e2e8f0',background: '#fff',height: '40px'}"
            :row-class-name="tableRowClassName" @row-click="handleRowClick">
          <el-table-column prop="agvNo" :label="$t('agv.agvNo')" >
            <template #default="scope">
              <el-tag class="text-xs">{{ scope.row.agvNo }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="ip" :label="$t('common.address')" width="150">
            <template #default="scope">
              <el-tag type="warning" class="text-xs">{{ scope.row.agvNo }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="model" :label="$t('common.model')"/>
          <el-table-column prop="warnStatus" :label="$t('common.warnStatus')">
            <template #default="scope">
              <el-tag class="text-xs">{{ scope.row.warnStatus ||'-'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" :label="$t('common.RWstatus')">
            <template #default="scope">
              <el-tag
                  :type="scope.row.status !== 'Stop' ? 'success' : 'danger'"
                  class="text-xs"
              >
                {{ scope.row.status ||'-'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="powerBattery" :label="$t('common.powerBattery')"/>
          <el-table-column prop="taskName" :label="$t('common.taskName')"/>
          <el-table-column prop="fromLocation" :label="$t('common.fromLocation')"/>
          <el-table-column prop="toLocation" :label="$t('common.toLocation')"/>
        </el-table>
        <!--分页-->
<!--        <div class="flex justify-end mt-3">-->
<!--          <el-pagination :current-page="data.page" :page-size="data.size"-->
<!--                         :page-sizes="[10, 20, 50, 100]" small background class="custom-pagination"-->
<!--                         :total="data.headerTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>
<script setup>
import '@/style/tailwind.css'
import {getDetaillist} from '@/api/agvApi'
import moment from 'moment/moment'
import { onMounted, reactive, ref } from 'vue'
import router from '@/router'

const  data  = reactive({
  size:10,
  page:1,
  headerTotal:0,
  detailTotal:0,
  currentSize:10,
  currentPage:1,
  loading:false
})

const from = reactive({
  time: [],
})

// 分页
const headerList = ref([])


const getlist = async () => {
  data.loading = true
  const res = await getDetaillist({
    // level: 0, //任务等级
    // taskCode: "",//任务编号
    // agvCode: "",//agv编号
    current: data.page,
    size: data.size,
    beginTime: from?.time?.[0] ? moment(from.time[0]).format('YYYY-MM-DD') : '',
    endTime:  from?.time?.[1] ? moment(from.time[1]).format('YYYY-MM-DD') : '',
  })
  if (res.code === 200) {
    headerList.value = res.result
    data.loading =false
    // data.headerTotal = res.result.total
  }
}
const getSerch=() =>{
  getlist()
}
const handleSizeChange=(val)=>{
  data.size = val
  getlist()
}
const handleCurrentChange=(val)=>{
  data.page = val
  getlist()
}
const goBack =() =>{
  router.push('/statistics');
}
onMounted(()=>{
  getlist()
})
</script>

<style scoped lang="scss">
:deep(.el-form) {
  height: 18px;
  display: flex;
  justify-content: center;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1; /* 完全可见 */
  }
  50% {
    opacity: 0.5; /* 半透明 */
  }
}

.dynamic-text {
  font-size: 38px;
  font-weight: bold;
  background: linear-gradient(270deg, #120101, #01350b, #162c02);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient 3s ease infinite, blink 1s infinite; /* 应用渐变和闪烁动画 */
}

.card-box, .card-box2 {
  background-image: url("@/assets/images/bgcard.png");
  background-size: cover; /* 使背景图像覆盖整个元素 */
  background-position: center; /* 使背景图像居中 */
  background-repeat: no-repeat; /* 不重复背景图像 */
  padding-left: 30px;
  padding-top: 30px;
}

.card-box2 {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 26px;
}

.text-box {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 15px;
}

.table-list {
  :deep(.el-table) {
    // 表格hover效果
    tbody tr:hover > td {
      background-color: #f8fafc !important;
    }

    // 斑马纹样式
    .bg-gray-50 td {
      background-color: #f8fafc;
    }

    // 单元格过渡动画
    td {
      transition: background-color 0.2s ease;
    }

    // 表格边框
    --el-table-border-color: #e2e8f0;

    // 去除表格底部边框
    &::before {
      display: none;
    }

    //.incomplete {
    //  td {
    //    background: linear-gradient(to bottom, rgb(214, 242, 254) 0%, rgb(194, 225, 254) 100%) !important; /* 从上到下的渐变 */
    //  }
    //  // 确保鼠标悬停时也保持背景色
    //  &:hover > td {
    //    background: linear-gradient(to bottom, rgb(214, 242, 254) 0%, rgb(194, 225, 254) 100%) !important; /* 从上到下的渐变 */
    //  }
    //}
  }

  // 分页器样式优化
  :deep(.custom-pagination) {
    --el-pagination-bg-color: #fff;
    --el-pagination-hover-color: #1e293b;
    --el-pagination-button-color: #64748b;
    --el-pagination-border-radius: 4px;

    .btn-prev, .btn-next {
      background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
      border: 1px solid #e2e8f0;
      color: #64748b;
      margin: 0 4px;

      &:hover:not(:disabled) {
        color: #1e293b;
        border-color: #cbd5e1;
      }

      &:disabled {
        background: #f1f5f9;
        border-color: #e2e8f0;
      }
    }

    .el-pager {
      li {
        background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
        border: 1px solid #e2e8f0;
        color: #64748b;
        margin: 0 2px;
        font-weight: normal;

        &:not(.is-disabled):hover {
          color: #1e293b;
          border-color: #cbd5e1;
        }

        &.is-active {
          background: #1e293b;
          border-color: #1e293b;
          color: white;
        }
      }
    }

    .el-pagination__total {
      color: #64748b;
      margin-right: 8px;
    }
  }

  // 添加搜索框相关样式
  :deep(.search-form) {

    .el-form-item {
      margin-bottom: 0;
      margin-right: 16px;

      &:last-child {
        margin-right: 0;
      }
    }
    .el-form-item__label {
      color: #64748b;
      font-weight: normal;
    }

    .custom-input {
      .el-input__wrapper {
        background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
        border: 1px solid #e2e8f0;
        box-shadow: none !important;

        &:hover {
          border-color: #cbd5e1;
        }

        &.is-focus {
          border-color: #1e293b;
        }
      }

      .el-input__inner {
        color: #1e293b;

        &::placeholder {
          color: #94a3b8;
        }
      }

      .el-input__suffix {
        color: #64748b;

        &:hover {
          color: #1e293b;
        }
      }
    }

    .custom-date-picker {
      .el-input__wrapper {
        background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
        border: 1px solid #e2e8f0;
        box-shadow: none !important;

        &:hover {
          border-color: #cbd5e1;
        }

        &.is-focus {
          border-color: #1e293b;
        }
      }

      .el-input__inner {
        color: #1e293b;

        &::placeholder {
          color: #94a3b8;
        }
      }

      .el-range-separator {
        color: #64748b;
      }

      .el-input__suffix {
        color: #64748b;

        &:hover {
          color: #1e293b;
        }
      }
    }
  }
}

</style>

